import React, { Component, Suspense } from "react";
import { connect } from "dva";
import GridContent from "@/components/PageHeaderWrapper/GridContent";
import PageLoading from "@/components/PageLoading";
import { Card, Button, Icon, Modal, message, Form, Input, Checkbox, Col, Row, Tag, Select } from "antd";
import UserSession from "@/UserSession";
import { knowledgeDialogNodeInfo } from '@/services/dialog';
const Item = React.lazy(() => import("./item"));
const { Option } = Select;

const formItemLayout = {
	labelCol: { span: 1 },
	wrapperCol: { span: 20 },
};

@connect(({ collectSlot, loading }) => ({
	collectSlot,
	loading: loading.effects["collectSlot/fetchSlot"],
}))
class SlotOrApi extends Component {
	constructor(props) {
		super(props);
		this.state = {
			dialogSlots: [],
			slotLoading: true, // 词槽加载loading
			nodeId: props.nodeId,
			stage: props.stage,
			dialogId: props.dialogId, // 多轮对话id
			data: {
				caseItemGroups: [],
				caseType: "slot",
			},
			apiList: [],
			fieldList: {},
		};
	}

	componentDidMount() {
		this.fetchSlot();
		this.loadActionApis();
	}

	fetchSlot = async () => {
		const { dispatch } = this.props;
		const { dialogId, nodeId, stage } = this.state;
		let { data, dialogSlots } = this.state;
		if (UserSession.isSystemKnowledge()) {
			let res = await knowledgeDialogNodeInfo({ dialogId, nodeId, nodeType: stage, field: "data" });
			data = res.dialogStage.data;
			dialogSlots = res.dialogSlots;
			if (!data || !data.caseItemGroups) {
				data = {
					caseItemGroups: [],
					caseType: "slot",
				};
			};
			if (!dialogSlots) {
				dialogSlots = [];
			};
			if (data.caseItemGroups.length === 0) {
				data.caseItemGroups.push([
					{
						itemType: "slot",
						apiId: "none",
						operator1: "filled",
						time: "",
						time1: "",
						values: [],
						opera: {
							operaType: "slot",
						},
						apiField: "none",
						type: "status",
						reqStatus: "",
						fieldOperationType: "",
						operator: "",
						slotIds: "",
					},
				]);
				this.setState({ data });
			};
			this.setState({ dialogSlots: res.dialogSlots, data });
		} else {
			dispatch({
				type: "collectSlot/fetchSlot",
				payload: {
					dialogId,
					nodeId,
					stage,
					field: "data",
					urlPrefix: UserSession.isSystemKnowledge() ? 1 : null,
				},
				callback: (res) => {
					data = res.dialogStage.data;
					dialogSlots = res.dialogSlots;
					if (!data || !data.caseItemGroups) {
						data = {
							caseItemGroups: [],
							caseType: "slot",
						};
					}
					if (!dialogSlots) {
						dialogSlots = [];
					}
					if (data.caseItemGroups.length === 0) {
						data.caseItemGroups.push([
							{
								itemType: "slot",
								apiId: "none",
								operator1: "filled",
								time: "",
								time1: "",
								values: [],
								opera: {
									operaType: "slot",
								},
								apiField: "none",
								type: "status",
								reqStatus: "",
								fieldOperationType: "",
								operator: "",
								slotIds: "",
							},
						]);
						this.setState({ data });
					};
					this.setState({ dialogSlots: res.dialogSlots, data });
				},
			});
		}
	};

	fixCaseArr = (arr) => {
		let { data } = this.state;
		data.caseItemGroups = arr;
		this.setState({ data });
	};

	loadActionApis = () => {
		const { dispatch } = this.props;
		const { nodeId, dialogId, stage } = this.state;

		dispatch({
			type: "dialogCommon/loadActionApis",
			payload: {
				page: 0,
				limit: 99999,
				urlPrefix: UserSession.isSystemKnowledge() ? 1 : null,
			},
			callback: (res) => {
				this.setState({ apiList: res == null ? [] : res, });
			},
		});
	};

	upSelectedData = (arr) => {
		const { inquire } = this.state;
		inquire.slots = arr;
		this.setState({ inquire, });
	};

	saveSlotCheck = () => {
		const { dispatch, closeDrawer } = this.props;
		const { dialogId, nodeId, data, stage } = this.state;
		dispatch({
			type: "collectSlot/saveSlot",
			payload: { field: "data", id: `${dialogId}-${nodeId}`, data, stage, },
			callback: (res) => {
				message.info(res.msg);
				closeDrawer();
			},
		});
	};

	fixFiled = (arr) => {
		this.setState({ fieldList: arr, });
	};

	render() {
		const { dialogSlots, data, apiList, fieldList } = this.state;
		return (
			<GridContent>
				<Suspense fallback={<PageLoading />}>
					<Col>
						<Item
							data={apiList}
							caseArr={data.caseItemGroups}
							selected={[]}
							fieldList={fieldList}
							dialogSlots={dialogSlots}
							upDateCase={(val) => this.fixCaseArr(val)}
							upNewData={(val) => this.fixCaseArr(val)}
							upMewSelected={(arr) => this.upSelectedData(arr)}
							upApiFiled={(arr) => this.fixFiled(arr)}
						/>
						<Button
							type='primary'
							htmlType='button'
							onClick={() => this.saveSlotCheck()}
							style={{ marginTop: 20 }}
							disabled={UserSession.isSystemKnowledge()}
						>
							保存
						</Button>
					</Col>
				</Suspense>
			</GridContent>
		);
	}
}

export default connect(({ user }) => ({
	currentUser: user.currentUser,
}))(Form.create()(SlotOrApi));
